// mvvm
// model -> view
// v-model
// new Vue({ ...选项 })

/*
vue3 双向数据绑定
Proxy()

vue2 双向数据绑定
Object.defineProperty()

Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
	// 修改页面
    console.log('你取了一个书名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }
})

Book = {
	name: ""
}

beforeCreate
created
beforeMount
==== beforeCreate
==== created
==== beforeMount
==== mounted
mounted
*/


Vue.component("counter", {
	template: "<button>counter</button>",
	// render: () => {}
	beforeCreate() {console.log("==== beforeCreate")},
	created() {console.log("==== created")},
	beforeMount() {console.log("==== beforeMount")},
	mounted() {console.log("==== mounted")},
	beforeUpdate() {},
	updated() {},
	beforeDestroy() {},
	destroyed() {}
})

const app = new Vue({
	// el: "#app",
	data: {
		msg: "vue实例"
	},
	beforeUpdate() {
		console.log("beforeUpdate")
	},
	updated() {
		console.log("updated")
	},
	created() {
		console.log("created")
		// this.testProp = "testProp"
	},
	mounted() {
		console.log("mounted")
	},
	beforeMount() {
		console.log("beforeMount")
	},
	beforeCreate() {
		console.log("beforeCreate")
	}
}).$mount("#app")


